<template>
	<view class="content">
		<image class="bg" src="../../static/me_bg.png" mode=""></image>
		<!-- <image class="me_bg_light" src="../../static/me_bg_light.png" mode=""></image> -->

		<view class="user" :style="{paddingTop:marginTop+'px'}" @click="setPhoneShow=true">
			<image :src="userData.pic" mode=""></image>
			<view class="text">
				<view class="name" :style="{color: userData.member_zt==2?'':'#fff'}">
					{{userData.user||''}}
				</view>
				<view class="vip_type" :style="{color: userData.member_zt==2?'':'#fff'}">
					{{userData.member_zt==2?'VIP会员':'普通用户'}}
				</view>
			</view>
		</view>

		<view class="vip_card">
			<image class="vip_card_bg" src="../../static/vipCardBG.png" mode=""></image>
			<view class="top" @click="nav('openVip')">
				<view class="vip_title">
					<image src="../../static/vip.png" mode=""></image>
					<text>{{userData.member_zt==2?'VIP会员':'普通用户'}}</text>
				</view>
				<view class="time" v-if="userData.member_zt==2">
					{{userData.member_time}} 到期
				</view>
				<view class="btn" v-else>
					立即开通 <u-icon name="play-right-fill" color="#333" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="vip_line">

			</view>

			<view class="bottom" @click.stop="navPath('/pages/index_/fastIndex/fastIndex')">
				<view class="text">
					<view class="">
						一键开玩
					</view>
					<view class="">
						即可开始团建游戏
						<!-- 已购买讲解演示&互动系统（{{userData.activ_num}}个） -->
					</view>
				</view>

				<u-icon name="arrow-right-double" size="54rpx" color="#AC7D3D" top="10rpx" bold></u-icon>
			</view>
		</view>

		<view class="type_list">
			<view class="item" v-for="(item ,index) in typeList" @click="nav(item.url,item.type)">
				<image :src="`../../static/${item.img}.png`" mode=""></image>
				<view class="">
					{{item.title}}
				</view>
			</view>
		</view>

		<view class="type2">
			<view class="" @click="navPath('/pages/challengeList/challengeList')">
				<image src="../../static/challenge.png" mode=""></image>
				<view class="">
					线上挑战
				</view>
			</view>

			<view class="" @click="nav('myAlbum')">
				<image src="../../static/photo.png" mode=""></image>
				<view class="">
					专属相册
				</view>
			</view>
		</view>

		<view class="cell_group">
			<u-cell-group :border="false">
				<u-cell title="我的订单" :border="false" isLink @click="nav('myOrderList')"></u-cell>
				<u-cell title="我的活动" :border="false" isLink @click="nav('activityList')"></u-cell>
				<u-cell title="收货地址" :border="false" isLink @click="navPath('/pages/addressList/addressList')"></u-cell>
				<u-cell title="商务合作" :border="false" isLink @click="nav('cooperation')"></u-cell>
				<u-cell title="意见反馈" :border="false" isLink @click="nav('opinion')"></u-cell>
				<u-cell title="历史动态" :border="false" isLink @click="nav('myForum')"></u-cell>
				<u-cell title="联系客服" :border="false" isLink @click="relation">
					<view slot="title" class="u-slot-title">
						<button open-type="contact" class="service" type="default" send-message-path="/pages/me/me"
							show-message-card style="color:#333;font-size: 15px;letter-spacing:3rpx;">
							联系客服
						</button>
					</view>
				</u-cell>
			</u-cell-group>
		</view>

		<u-popup :show="setPhoneShow" mode="bottom" round="14" zIndex="999999" @close="closePhoneShow">
			<view class="phone">
				<view class="title1">
					修改头像昵称
				</view>
				<!-- 				<view class="" style="font-size: 26upx;color: #ccc;margin-top: 10upx;">
					请填写必要信息，在参加活动的活动中显示和说明
				</view> -->
				<form @submit="formSubmit">
					<view class="form_item">
						<view class="form_item_lable">
							头像
						</view>
						<button class="service" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="pic||'../../static/head.png'"></image>
						</button>
					</view>
					<view class="form_item">
						<view class="form_item_lable">
							昵称
						</view>
						<input type="nickname" v-model="name" class="weui-input" name="name" placeholder="请输入昵称" />
					</view>
					<button class="button" form-type="submit">确定</button>
				</form>
			</view>
		</u-popup>

		<tqb-tabbar activeIndex="3" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				marginTop: 0,
				setPhoneShow: false,
				userData: {},
				pic: '',
				name: '',
				typeList: [{
					img: 'discount',
					title: '优惠券',
					url: 'myCoupon'
				}, {
					img: 'collect',
					title: '收藏',
					url: 'myCollect',
					type: 1
				}, {
					img: 'footprint',
					title: '足迹',
					url: 'myCollect',
					type: 2
				}, {
					img: 'standings',
					title: '战绩',
					url: 'honor'
				}, ]
			}
		},
		created() {
			this.marginTop = uni.getMenuButtonBoundingClientRect().bottom
		},
		onShow() {
			this.$myRuquest('home/user/user').then(res => {
				uni.setStorageSync('userData', res.data);
				this.userData = res.data
				this.pic = this.userData.pic
				this.name = this.userData.user
			})
		},
		methods: {
			closePhoneShow() {
				this.setPhoneShow = false
			},
			nav(path, type) {
				uni.navigateTo({
					url: `./${path}/${path}?type=${type}`
				})
			},
			relation() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: ''
					},
					corpId: '',
					success(res) {}
				})
			},
			navPath(path) {
				uni.navigateTo({
					url: path
				})
			},
			onChooseAvatar(e) {
				this.$uploadFiles({
					filePath: e.detail.avatarUrl
				}).then(res => {
					this.pic = 'http://wjlm.goldsu.cn' + res.data
				})
			},

			formSubmit(e) {
				let that = this
				if (!(this.name && this.pic)) return uni.showToast({
					title: '为了您的体验，请填写头像昵称！',
					icon: 'none'
				});

				let code = false
				for (let i = 0; i < this.name.length; i++) {
					let item = this.name[i]
					if (!(uni.$u.test.chinese(item) || uni.$u.test.enOrNum(item))) {
						code = true
						i = this.name.length
					}
				}

				if (code) return uni.showToast({
					title: '昵称禁止使用特殊字符！',
					icon: 'none'
				})


				let data = {
					pic: this.pic,
					name: this.name,
				}
				var reg_exp = new RegExp("http://wjlm.goldsu.cn");
				data.pic = data.pic.replace(reg_exp, "")
				// return console.log('用户', data)
				this.$myRuquest('home/user/update_user', data).then(res => {
					uni.setStorageSync('userData', res.data);
					this.setPhoneShow = false

					this.$myRuquest('home/user/user').then(res => {
						uni.setStorageSync('userData', res.data);
						this.userData = res.data
						this.pic = this.userData.pic
						this.name = this.userData.user
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #FAFAFA;
		min-height: 100vh;

		.bg {
			position: fixed;
			top: 0upx;
			left: 0;
			right: 0;
			width: calc(100vw + 2upx);
			height: 490upx;
			z-index: 1;
		}

		.me_bg_light {
			height: 502upx;
			top: -150upx;
			opacity: .3;
		}

		.user {
			display: flex;
			padding: 40upx 60upx;
			padding-bottom: 30upx;
			position: relative;
			z-index: 9;

			image {
				width: 112upx;
				height: 112upx;
				border-radius: 50%;
				margin-right: 14upx;
			}

			.text {
				color: #F9CD69;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.name {
					font-size: 36upx;
					font-weight: 700;
				}

				.vip_type {
					font-size: 24upx;
				}
			}
		}


		.vip_card {
			background-image: linear-gradient(to right, #FEF2E2, #F9CC68);
			padding: 20upx;
			border-radius: 16upx;
			margin: 20upx 40upx;
			margin-top: 0;
			position: relative;
			z-index: 9;

			.vip_card_bg {
				width: 288upx;
				height: 180upx;
				position: absolute;
				right: -40upx;
				top: -60upx;
				z-index: -1;
			}

			.top {
				display: flex;
				justify-content: space-between;
				font-size: 24upx;
				font-weight: 700;
				align-items: center;
				color: #333333;

				.vip_title {
					display: flex;
					align-items: center;

					image {
						width: 50upx;
						height: 50upx;
						margin-right: 10upx;
					}
				}

				.time {}
			}

			.vip_line {
				width: 100%;
				height: 4upx;
				margin-top: 5upx;
				margin-bottom: 30upx;
				background-image: linear-gradient(to right, rgba(172, 125, 61, 0), rgba(172, 125, 61, 1), rgba(172, 125, 61, 0));
			}

			.bottom {
				padding: 0 10upx;
				margin: 20upx 0;
				height: 100upx;
				display: flex;

				.text {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					font-weight: 700;

					view:nth-child(1) {
						font-size: 40upx;
					}

					view:nth-child(2) {
						font-size: 24upx;
						color: #666666;
					}
				}
			}
		}

		.type_list {
			padding: 26upx 30upx;
			margin: 0 40upx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			border-radius: 16upx;
			position: relative;
			z-index: 9;

			.item {
				border-radius: 16upx;
				text-align: center;

				image {
					width: 76upx;
					height: 76upx;
					margin: 0 auto;
					margin-bottom: 6upx;
				}
			}
		}

		.type2 {
			display: flex;

			margin: 20upx 40upx;

			>view {
				padding: 12upx 30upx;
				border-radius: 16upx;
				display: flex;
				font-size: 28upx;
				font-weight: 700;
				background-color: #FFFFFF;
				flex: 1;
				align-items: center;

				image {
					width: 80upx;
					height: 80upx;
					margin-right: 40upx;
				}
			}

			>view:nth-child(1) {
				margin-right: 10upx;
			}

			>view:nth-child(2) {
				margin-left: 10upx;
			}
		}

		.cell_group {
			margin: 0 40upx;
			background-color: #FFFFFF;
			border-radius: 16upx;
			padding: 5upx 0;
		}
	}

	.service {
		background-color: #FFFFFF !important;
		border-radius: 0 !important;
		padding: 0 !important;
		font-size: 15px !important;
		line-height: 1.5em !important;
		text-align: left !important;
	}
	.service::after {
		border: none;
	}
	.btn {
		font-size: 28upx;
		color: #333333;
		display: flex;
		align-items: center;
	}


	.phone {
		padding: 20upx;
		width: 660upx;
		padding-bottom: 40upx;
		/* height: 560upx; */
		margin: 0 auto;

		.title1 {
			font-size: 34upx;
			color: #333333;
		}

		.title2 {
			margin-top: 20upx;
			font-size: 32upx;
			color: #999999;
		}

		image {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			display: block;
		}
	}

	.form_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1upx solid #ccc;
		padding: 40upx 0;
		text-align: right;

		.form_item_lable {
			font-size: 28upx;
			flex: 1;
			text-align: left;
		}
	}

	.button {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		letter-spacing: 3rpx;
		/* 		position: relative;
			top: 100rpx; */
		margin-top: 40upx;
		border-radius: 50rpx;
		background: $theme-color;
		color: white;
		font-size: 35rpx;
		text-align: center;
		border-radius: 50rpx;
	}
</style>
